<h2 translate>Routes</h2>
<p translate>The following rules are currently active on this system.</p>

<uib-tabset justified="true">
	<uib-tab heading="{{'Active IPv4-Routes' | translate}}">
		<div class="l2-grid l2-grid-hover">
			<div class="row">
				<div class="cell clearfix caption col-xs-4" translate>
					Target
				</div><div class="cell clearfix caption col-xs-4" translate>
					Gateway
				</div><div class="cell clearfix caption col-xs-2" translate>
					Metric
				</div><div class="cell clearfix caption col-xs-2" translate>
					Interface
				</div>
			</div>

			<div class="row" ng-repeat="route in routes">
				<div class="cell clearfix content col-xs-4">
					{{route.target}}
				</div><div class="cell clearfix content col-xs-4">
					{{route.nexthop}}
				</div><div class="cell clearfix content col-xs-2">
					{{route.metric}}
				</div><div class="cell clearfix content col-xs-2">
					{{route.device}}
				</div>
			</div>
		</div>
	</uib-tab>

	<uib-tab heading="{{'Active IPv6-Routes' | translate}}">
		<div class="l2-grid l2-grid-hover">
			<div class="row">
				<div class="cell clearfix caption col-xs-3" translate>
					Target
				</div><div class="cell clearfix caption col-xs-3" translate>
					Gateway
				</div><div class="cell clearfix caption col-xs-3" translate>
					Source
				</div><div class="cell clearfix caption col-xs-1" translate>
					Metric
				</div><div class="cell clearfix caption col-xs-2" translate>
					Interface
				</div>
			</div>

			<div class="row" ng-repeat="route in routes6">
				<div class="cell clearfix content col-xs-3">
					{{route.target}}
				</div><div class="cell clearfix content col-xs-3">
					{{route.nexthop}}
				</div><div class="cell clearfix content col-xs-3">
					{{route.source}}
				</div><div class="cell clearfix content col-xs-1">
					{{route.metric}}
				</div><div class="cell clearfix content col-xs-2">
					{{route.device}}
				</div>
			</div>
		</div>
	</uib-tab>

	<uib-tab heading="{{'ARP' | translate}}">
		<div class="l2-grid l2-grid-hover">
			<div class="row">
				<div class="cell clearfix caption col-xs-4" translate>
					MAC-Address
				</div><div class="cell clearfix caption col-xs-4" translate>
					IPv4-Address
				</div><div class="cell clearfix caption col-cs-4" translate>
					Interface
				</div>
			</div>

			<div class="row" ng-repeat="(macaddr, ipaddrs) in arptable">
				<div class="cell clearfix content col-xs-4">
					<span style="border-bottom: 1px dotted #ccc; cursor: pointer" popover-template="'vendorTooltip'" popover-trigger="mouseenter">{{macaddr.toUpperCase()}}</span>
				</div><div class="cell clearfix content nowrap col-xs-8">
					<div class="row" ng-repeat="entry in ipaddrs">
						<div class="cell clearfix content nowrap col-xs-6">
							{{entry.ipaddr}}
						</div><div class="cell clearfix content nowrap col-xs-6">
							{{entry.device}}
						</div>
					</div>
				</div>
			</div>
		</div>
	</uib-tab>
</uib-tabset>

<script type="text/ng-template" id="vendorTooltip">
	<small ng-init="vendor=getVendor(macaddr)">{{vendor.vendor}}</small>
</script>
